<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.user" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="formInline.region" placeholder="角色">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      stripe
    >
      <!--      @row-click="getUser"-->
      <el-table-column align="center" label="id" width="95">
        <template slot-scope="scope">
          {{ scope.row.userId }}
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="电话">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" plain @click="getUser(scope.row)" />
          <el-button type="success" size="mini" icon="el-icon-share" plain />
          <el-button type="danger" size="mini" icon="el-icon-delete" plain @click="deleteById" />
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getProductList } from '@/api/table'

export default {
  name: 'ProductList',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: false,
      pageNum: 1,
      total: 0,
      pageSize: 10,
      formInline: {
        user: '',
        region: ''
      },
      user: {
        userId: 0,
        username: '',
        password: '',
        birthday: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getProductList({ pageNum: this.pageNum, pageSize: this.pageSize }).then(response => {
        this.total = response.total
        this.list = response.data
        this.listLoading = false
      })
    },
    deleteById() {

    },
    handleSizeChange(size) {
      this.pageSize = size
      this.fetchData()
    },
    handleCurrentChange(page) {
      this.pageNum = page
      this.fetchData()
    },
    onSubmit() {
      console.log('submit!')
    },
    getUser(user) {
      console.log(user)
      this.user = user
      this.$router.push({
        path: '/updateUser',
        query: { user: JSON.stringify(this.user) }
      })
      // this.user = {
      //   userId: user.userId,
      //   username: user.username,
      //   password: user.password
      // }
      // console.log(this.user)
    }
  }
}
</script>

<style scoped>

</style>
